Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(payments): update PaymentErrorView to utilize Tailwind #13745

Merged
merged 1 commit into from
Aug 1, 2022
Merged

refactor(payments): update PaymentErrorView to utilize Tailwind #13745

merged 1 commit into from
Aug 1, 2022
+38 −56

Conversation

sardesam
Copy link
Contributor

@sardesam sardesam commented Jul 25, 2022 •
edited
Loading

Because

  • We want to convert to Tailwind across fxa for consistency and to improve overall maintenance
  • We want to improve responsiveness and UI/UX
  • We want to improve accessibility

This pull request

  • Replaces all CSS/SCSS with Tailwind utility classes with the exception of:
    • .subscription-title + .payment-error which uses the mixin checkout-title()
    • .payment-error which uses the mixin checkout-view()
  • Removes the style from .scss file that is specific to the PaymentErrorView component with the exception of classes mentioned above
  • Reworks Storybook files

Issue that this pull request solves

Closes: #13583

Checklist

Put an x in the boxes that apply

  • My commit is GPG signed.
  • If applicable, I have modified or added tests which pass locally.
  • I have added necessary documentation (if appropriate).
  • I have verified that my changes render correctly in RTL (if appropriate).

@sardesam sardesam requested a review from a team as a code owner July 25, 2022 18:20
@sardesam sardesam marked this pull request as draft July 25, 2022 18:20
@sardesam sardesam force-pushed the FXA-5516__PaymentErrorView branch 2 times, most recently from 33b736e to 86c7481 Compare July 28, 2022 04:22
@sardesam sardesam changed the title [WIP]refactor(payments): update PaymentErrorView component to utilize Tailwind refactor(payments): update PaymentErrorView component to utilize Tailwind Jul 28, 2022
@sardesam sardesam marked this pull request as ready for review July 28, 2022 04:27
@sardesam
Copy link
Contributor Author

sardesam commented Jul 28, 2022 •
edited
Loading

Similar to PaymentProcessing, this component will have to be revisited. See #13716 (review).

@sardesam sardesam marked this pull request as draft July 28, 2022 05:05
@sardesam sardesam changed the title refactor(payments): update PaymentErrorView component to utilize Tailwind [WIP]refactor(payments): update PaymentErrorView to utilize Tailwind Jul 28, 2022
@sardesam sardesam force-pushed the FXA-5516__PaymentErrorView branch from 86c7481 to 6b5febb Compare July 28, 2022 23:57
@sardesam sardesam force-pushed the FXA-5516__PaymentErrorView branch 2 times, most recently from 6701ea3 to bca87c0 Compare July 29, 2022 20:24
@sardesam sardesam changed the title [WIP]refactor(payments): update PaymentErrorView to utilize Tailwind refactor(payments): update PaymentErrorView to utilize Tailwind Jul 29, 2022
@sardesam sardesam force-pushed the FXA-5516__PaymentErrorView branch from 1ba7d47 to d8f601d Compare July 29, 2022 20:32
@sardesam sardesam marked this pull request as ready for review July 29, 2022 20:38
@xlisachan xlisachan self-assigned this Jul 29, 2022
@sardesam sardesam force-pushed the FXA-5516__PaymentErrorView branch 2 times, most recently from 8ec1a65 to 6160087 Compare July 30, 2022 00:12
refactor(payments): update PaymentErrorView component to utilize Tail…
fe981da 
…wind

Because:

* We want to convert to Tailwind across fxa for consistency and to improve overall maintenance
* We want to improve responsiveness and UI/UX
* We want to improve accessibility

This commit:

* Replaces all CSS/SCSS with Tailwind utility classes
* Removes .css and .scss files
* Reworks Storybook files

Closes #13583
@sardesam sardesam force-pushed the FXA-5516__PaymentErrorView branch from d0d295a to fe981da Compare August 1, 2022 15:01
xlisachan
xlisachan approved these changes Aug 1, 2022
View reviewed changes
Copy link
Contributor

@xlisachan xlisachan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 LGTM!

Just added the nit from our discussion (not a blocker, but think it should be updated to be consistent with other stories).

Also, I added a comment regarding the revision to the style below as it was done to match CouponForm.

packages/fxa-payments-server/src/components/PaymentErrorView/index.stories.tsx
</BrowserRouter>
));
export default {
title: 'components/PaymentError',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: should this be components/PaymentErrorView?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I kept it the same as it was before. Leaving it for now, but will address when we return to update after the blockers have been addressed.

packages/fxa-payments-server/src/components/PaymentErrorView/index.tsx Show resolved Hide resolved
@sardesam sardesam merged commit 9a5ab9c into main Aug 1, 2022
@sardesam sardesam deleted the FXA-5516__PaymentErrorView branch August 1, 2022 15:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@xlisachan xlisachan xlisachan approved these changes

@pdehaan pdehaan pdehaan left review comments

Assignees

@xlisachan xlisachan

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[subplat][tailwind] Component - PaymentErrorView - Conversion
3 participants
@sardesam @pdehaan @xlisachan